    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>手风琴案例</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
                width: 30%;
                margin: 100px auto;
            }
            .title{
                display: block;
                text-align: center;
                color: black;
                height: 30px;
                line-height: 30px;
                border: 1px solid #000;
            }
            .liArr div{
                text-align: center;
                height: 200px;
                line-height: 200px;
                font-size: 25px;
                color: #2b0ccc;
                border: 2px solid #41cc19;
                display: none;
            }
        </style>
        <script src="../jquery-3.4.1.js"></script>
    </head>
    <body>
    <ul>
        <li class="liArr">
           <span class="title">展开1</span>
            <div>展开的div1</div>
        </li>
        <li class="liArr">
            <span class="title">展开2</span>
            <div>展开的div2</div>
        </li>
        <li class="liArr">
            <span class="title">展开3</span>
            <div>展开的div3</div>
        </li>
        <li class="liArr">
            <span class="title">展开4</span>
            <div>展开的div4</div>
        </li>
        <li class="liArr">
            <span class="title">展开5</span>
            <div>展开的div5</div>
        </li>
    </ul>
    <script>
        // console.log($===jQuery);
        jQuery(document).ready(function () {
         $('.title').click(function () {
            $(this).next().show();
            $(this).parent('.liArr').siblings().children('div').hide();
         })
        })
    </script>
    </body>
    </html>